<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('Magic_Coffee咖啡店-商品详情','detail')">
    <link rel="stylesheet" th:href="@{/admin/plugins/bootstrap/css/bootstrap.min.css}"/>
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<nav th:replace="mall/header::header-search-fragment"></nav>
<div class="crumb">
    <div class="w">
        <div class="crumb-con">
            <a href="./index.html" class="link">Mall</a>
            <span>></span>
            <span class="link-text">商品详情</span>
        </div>
    </div>
</div>

<div class="page-wrap w">
    <div class="intro-wrap">
        <div class="p-img-con">
            <div class="main-img-con">
                <img class="main-img" th:src="@{ ${productDetail.imageHost}+${productDetail.mainImage} }" th:alt="${productDetail.name}"/>
            </div>
            <ul class="p-img-list">
                <th:block th:each="subImages : ${productDetail.subImages}">
                    <li class="p-img-item">
                        <img class="p-img" th:src="@{ ${productDetail.imageHost}+${subImages} }" th:alt="${productDetail.name}"/>
                    </li>
                </th:block>
            </ul>
        </div>

        <div class="p-info-con">
            <input class="productId" type="hidden" th:value="${productDetail.id}">
            <h1 class="p-name">[[ ${productDetail.name} ]]</h1>
            <p class="p-subtitle">[[ ${productDetail.subtitle} ]]</p>
            <div class="p-info-item p-price-con">
                <span class="label">价格：</span>
                <span class="info">￥[[ ${productDetail.price} ]]</span>
            </div>
        </div>
    </div>
    <div class="detail-wrap">
        <div class="detail-tab-con">
            <ul class="tab-list">
                <a th:href="@{'./replycomment.html?productId=' + ${productDetail.id}}"><li class="tab-item active">发表评论</li></a>
            </ul>
        </div>

<!--        评论条件：是否购买过该商品(传入一个userId ，productId，查询是否存在该商品购买记录)
               ，且只能发表一条评论()，发表的评论均可在个人中心的我的评论中查看。通过判断订单的状态来，允许用户是否能进行评论操作
               评论后的订单状态记得改变-->
        <div class="detail-con">
            <div class="comment">
                <div class="comment-edit">
                    <div id="wangEditor">

                    </div>
                    <div class="comment-btn">
                        <input type="submit" class="add-comment-btn">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/admin/plugins/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
<!--<script th:src="@{/mall/js/detail.js}" type="text/javascript"></script>-->
<script th:src="@{/mall/js/wangEditor.min.js}"></script>
<script type="text/javascript">
    let that = this;
    let E = window.wangEditor;
    editor = new E('#wangEditor');
    // 设置高度
    editor.$textContainerElem.css('height','100px');
    //开启debug模式
    editor.config.debug = true;
    // 关闭粘贴内容中的样式
    editor.config.pasteFilterStyle = false;
    // 忽略粘贴内容中的图片
    editor.config.pasteIgnoreImg = true;
    // 使用 base64 保存图片
    //editor.config.uploadImgShowBase64 = true
    // 上传图片到服务器
    editor.config.uploadFileName = 'files'; //设置文件上传的参数名称
    editor.config.uploadImgServer = '/richtext_upload'; //设置上传文件的服务器路径
    editor.config.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 10M
    editor.config.uploadImgMaxLength = 5;
    editor.config.uploadImgHooks = {
        before : function(xhr, editor, files) {},
        success : function(xhr, editor, result) { console.log("上传成功"); },
        fail : function(xhr, editor, result) { console.log("上传失败,原因是"+result);},
        error : function(xhr, editor) { console.log("上传出错");},
        timeout : function(xhr, editor) { console.log("上传超时");},
        customInsert: function (insertImg, result, editor) {
            // insertImg 是插入图片的函数，editor 是编辑器对象，
            // result 是服务器端返回的结果必须是一个JSON格式字符串,多个图片地址组成的数组
            for (var j = 0; j < result.data.length; j++) {
                insertImg(result.data[j]);
                console.log(result.data);
            }
            console.log("上传图片成功！");
        }
    }
    //自己定义上传的方法
    editor.config.customUploadImg = function (files, insert) {
        var daw = new FormData();
        for(var i=0;i<files.length;i++){
            daw.append("files",files[i]);
        }
        $.ajax({
            url:'richtext_upload',
            type: "POST",
            data: daw,
            dataType:'json',
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success:function(da){
                if(da.errno == 0){
                    // insertImg 是插入图片的函数，editor 是编辑器对象，
                    // result 是服务器端返回的结果必须是一个JSON格式字符串,多个图片地址组成的数组
                    for (var j = 0; j < da.data.length; j++) {
                        insert(da.data[j]);
                    }
                    console.log("上传图片成功！");
                }else{
                    alert(da.msg);
                    return;
                }
            }
        });
    }
    editor.create();

    // 添加评论

    $(document).on('click','.add-comment-btn',function () {
        var productId = $(".productId").val();
        var commentText = editor.txt.html();
        $.ajax({
            type: 'POST',
            url: 'commentAdd',
            data: {
                content:commentText,
                productId:productId
            },
            success : function (result) {
                if (result.resultCode == 200){
                    alert("评论成功");
                    window.location.href= 'detail.html?productId=' + productId;
                }
            },
            error : function () {
                alert("操作错误");
            }
        })
    });
</script>
</body>
</html>